<template>
  <el-dialog
    :visible.sync="visible"
    title=""
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="70%"
    top="100px"
  >
    <div class="dialogInner">
      <div class="status">
        <span :style="{ background: roomStatusColor[dataForm.status] }">
          <template v-if="dataForm.status == 0"> 待支付 </template>
          <template v-if="dataForm.status == 1"> 待使用 </template>
          <template v-if="dataForm.status == -1"> 已取消 </template>
          <template v-if="dataForm.status == -2"> 退款中 </template>
          <template v-if="dataForm.status == -3"> 已退款 </template>
          <template v-if="dataForm.status == 3"> 已完成 </template>
        </span>
      </div>
      <div class="orderInfo">
        <span
          >订单编号:<span class="blue">{{ dataForm.orderCode }}</span></span
        >
        <span>下单时间:{{ dataForm.orderTime }}</span>
        <span
          >联系人:{{
            type == "2" ? dataForm.scenicOrderMap.linkName : dataForm.linkName
          }}</span
        >
        <span
          >联系方式:{{
            type == "2"
              ? dataForm.scenicOrderMap.linkMobile
              : dataForm.linkMobile
          }}</span
        >
        <span
          >订单金额:<span class="blue">{{ dataForm.realityPay }}</span></span
        >
      </div>

      <!-- <template v-if="type == '2'">
        <div style="display: flex" v-if="dataForm.status == 1">
          <div class="statused">
            <span style="background: #466fed"> 核销 </span>
          </div>
          <div class="statused">
            <span style="background: #e57470"> 退款 </span>
          </div>
        </div>
      </template> -->

      <!-- 船+景详情 -->
      <template v-if="type == '2'">
        <h4>
          景点订单信息<template v-if="dataForm.status == 1">
            <el-button
              type="primary"
              size="mini"
              @click="hexiao"
              style="margin-left: 20px"
              >核销</el-button
            ><el-button type="danger" size="mini" @click="tuikuan"
              >退款</el-button
            ></template
          >
        </h4>
        <el-table
          v-loading="dataListLoading"
          :data="dataForm.scenicOrderMap.ticketList"
          border
          style="width: 100%"
          @selection-change="dataListSelectionChangeHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
            :selectable="selectable"
          >
          </el-table-column>
          <el-table-column
            prop="realName"
            label="乘客名称"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="ticketName"
            label="票种类型"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="idCode"
            label="证件号码"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="scenicName"
            label="景点名称"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.scenicOrderMap.scenicName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="totalPrice"
            label="单价(元)"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <!-- <template slot-scope="scope">
              {{ dataForm.totalPrice.realityPay }}
            </template> -->
          </el-table-column>
          <!-- <el-table-column
            prop="discountPrice"
            label="折扣价(元)"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column> -->
          <el-table-column
            prop="status"
            label="票状态"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ statusType[scope.row.status] }}
            </template>
          </el-table-column>
        </el-table>

        <h4>船票订单信息</h4>
        <el-table
          v-loading="dataListLoading"
          :data="dataForm.isShipOrderListDTO.detailDTOList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="passName"
            label="乘客名称"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="ticketName"
            label="票种类型"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.scenicOrderMap.ticketList[scope.$index].ticketName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="credentialNum"
            label="证件号码"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="startPortName"
            label="出发地点"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.startPortName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="endPortName"
            label="到达地点"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.endPortName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="sailDate"
            label="出发日期"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.sailDate }}
            </template>
          </el-table-column>
          <el-table-column
            prop="sailTime"
            label="开船时间"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.sailTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="hxlxm"
            label="航班次"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.hxlxm }}
            </template>
          </el-table-column>
          <el-table-column
            prop="clxm"
            label="船型"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ dataForm.isShipOrderListDTO.clxm }}
            </template>
          </el-table-column>
          <el-table-column
            prop="seatClassName"
            label="舱位"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="ticketFee"
            label="票价"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="realFee"
            label="实付价格"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
        </el-table>
      </template>
      <!-- 景区门票详情 -->
      <template v-if="type == '1'">
        <h4>
          景点订单信息<template v-if="dataForm.status == 1">
            <el-button
              type="primary"
              size="mini"
              @click="hexiao"
              style="margin-left: 20px"
              >核销</el-button
            ><el-button type="danger" size="mini" @click="tuikuan"
              >退款</el-button
            ></template
          >
        </h4>
        <el-table
          v-loading="dataListLoading"
          :data="dataForm.ticketList"
          border
          @selection-change="dataListSelectionChangeHandle"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
            :selectable="selectable"
          >
          </el-table-column>
          <el-table-column
            prop="realName"
            label="乘客名称"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="ticketType"
            label="票种类型"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">{{
              $getDictLabel("ticket_type", scope.row.ticketType)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="idCode"
            label="证件号码"
            header-align="center"
            align="center"
            min-width="150px"
          ></el-table-column>
          <el-table-column
            prop="scenicSpotName"
            label="景点名称"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="ticketPrice"
            label="单价(元)"
            header-align="center"
            align="center"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="票状态"
            header-align="center"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              {{ statusType[scope.row.status] }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </el-dialog>
</template>

<script>
var that;
export default {
  data() {
    return {
      orderStatus: "",
      addOrUpdateVisible: false, //编辑订单
      visible: false,
      statusType: {
        4: "已退款",
        3: "退票中",
        "-1": "已取消",
        0: "待支付",
        1: "待使用",
        2: "已使用",
      },
      roomStatusColor: {
        0: "#f29130",
        1: "#2d8cf0",
        "-1": "#969799",
        "-2": "#ed4014",
        "-3": "#969799",
        3: "#2d8cf0",
      },
      roomStatusColored: {
        0: "#466fed",
        1: "#e57470",
        "-1": "#466fed",
        "-2": "#e57470",
        "-3": "#e57470",
        3: "#e57470",
      },
      dataListLoading: false,
      activeNames: "1",
      dataForm: {
        id: "",
      },
      refund: {
        ids: "",
        orderCode: "",
      },
    };
  },
  created() {
    that = this;
  },
  props: ["type", "url", "orderCode"],
  methods: {
    selectable(row) {
      console.log(row.status == 0);
      if (row.status == 1) {
        return true;
      } else {
        return false;
      }
    },
    dataListSelectionChangeHandle(data) {
      this.refund.ids = data.map((item) => item.id);
    },
    hexiao() {
      if (this.refund.ids.length == 0) {
        return this.$message.error("请选择游客");
      }
      this.refund.orderCode = this.dataForm.orderCode;
      this.$confirm("确定此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .post("/scenic/scenic-order/writeOffTicket", this.refund)
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getInfo();
                },
              });
            }
          });
      });
    },
    tuikuan() {
      if (this.refund.ids.length == 0) {
        return this.$message.error("请选择游客");
      }
      this.refund.orderCode = this.dataForm.orderCode;
      this.$confirm("确定此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .post("/scenic/api/scenic-order/batchRefundTicket", this.refund)
          .then((res) => {
            if (res.data.code == 0) {
              let queryValue={};
              queryValue.outRefundNo = res.data.data.id;
              queryValue.outTradeNo = res.data.data.orderCode;
              queryValue.refundFee = res.data.data.refundPrice;
              queryValue.totalFee = res.data.data.realityPay;
              this.$http.post("/order/icbc/refund", queryValue).then((result) => {
                  if (result.data.code === 0) {
                    this.$message({
                      message: this.$t("prompt.success"),
                      type: "success",
                      duration: 500,
                      onClose: () => {
                        this.getInfo();
                      },
                    });
                  }else{
                    return this.$message.error(result.data.msg);
                  }
                });
            }
          });
      });
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        // this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      let url = "";
      if (this.type == "2") {
        //船+景
        url = this.url + this.dataForm.id;
      } else {
        //景区门票
        url = this.url + "?orderCode=" + this.orderCode;
      }
      this.$http
        .get(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.status {
  span {
    color: #fff;
    margin-bottom: 30px;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
  }
}
.statused {
  span {
    color: #fff;
    margin: 20px 20px 10px 0;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
  }
}
h4 {
  margin: 30px 0 15px;
  color: #000;
}
.blue {
  color: #2d8cf0;
}
.orderInfo {
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  line-height: 40px;
  left: 0;
  display: flex;
  justify-content: space-around;
  bottom: 100px;
}
</style>
